<template>
  <div class="user">
    <basic-container>
      <!-- @on-load="getList" -->
      <avue-crud
        ref="crud"
        v-model="form"
        :option="option"
        :page.sync="page"
        :table-loading="listLoading"
        :before-open="handleOpenBefore"
        :data="list"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-update="update"
        @row-del="deletes"
        @row-save="create"
        @row-click="rowClick"

      >
        <!--  -->
        <template slot="menuLeft">
          <el-button  v-if="option.viewBtn" @click="topHandleView">查看 </el-button>
          <el-button  v-if="option.editBtn"  @click="topHandleUpdate">编辑 </el-button>
          <el-button v-if="option.delBtn" @click="topDeletes">删除 </el-button>
        </template>
        <!--  -->
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { formCreate } from "@/api/index";
export default {
  name: "TableListPage",
  data() {
    return {
      option: {
        selection: true,
        menu: false,
        border: false,
        stripe: false,
      },
      id: "",
      page: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10, // 每页显示多少条,
        isAsc: false, // 是否倒序
      },
      idName: "",
      list: [], // 表格
      listLoading: true,
      form: {}, // 表单绑定的值
    };
  },
  computed: {},
  watch: {
    $route() {
      console.log(this.$route, "aaaaa");
      let val = this.$route.params;
      for (let i in val) {
        console.log(val[i], [i]);
        this.id = val[i].replace(":", "");
      }
      // this.queryTableData(this.id)
      this.id = this.$route.name.split("?")[1];
      this.queryTableData(this.$route.name.split("?")[1]);
      this.page = {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10, // 每页显示多少条,
        isAsc: false, // 是否倒序
      };
      this.getList(this.page);
    },
  },
  created() {
    this.id = "";
    this.getParams(this.$route.params);
    console.log(this.$route, "aaaaa");
  },
  mounted() {
    this.getList(this.page);
  },
  methods: {
     rowClick(row,event,column) {
      // 点击表格行
      if (this.$refs.crud.$refs.table) {
        this.$refs.crud.$refs.table.clearSelection();
      }
      this.$refs.crud.$refs.table.toggleRowSelection(row, true);
    },
    topHandleUpdate(){
        let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      console.log(selection[0],selection[0].$index)
       this.$refs.crud.rowEdit(selection[0], selection[0].$index)

    },
     topHandleView(){
        let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      console.log(selection[0],selection[0].$index)
       this.$refs.crud.rowView(selection[0], selection[0].$index)
    },
    
    getParams(val) {
      for (let i in val) {
        console.log(val[i], [i]);
        this.id = val[i].replace(":", "");
      }
      //  this.queryTableData(this.id)
      this.id = this.$route.name.split("?")[1];
      this.queryTableData(this.$route.name.split("?")[1]);
    },
    getList(page, params) {
      if (params == undefined || params == null || params == "") {
        params = {};
      }
      const dataParams = {};
      const that = this;
      this.listLoading = false;
      const dataPage = this.page;
      dataParams.current = page.current - 1;
      dataParams.size = page.size;
      dataParams.tableId = this.id;
      const formdata = [];
      for (const key in params) {
        if (key != "current" && key != "size") {
          const valParams = {};
          valParams.colName = key;
          valParams.colVal = params[key];
          formdata.push(valParams);
        }
      }
      dataParams.voList = formdata;
      // doPost('/online/oper/queryPage', dataParams).then((res) => {
      //   that.list = res.data.dataList
      //   const total = res.data.totalElements
      //   that.page.total = String(total)
      //   that.page.current = res.data.page
      //   that.listLoading = false
      // })
      formCreate.operQueryPage(dataParams).then((res) => {
        that.list = res.dataList;
        const total = res.totalElements;
        that.page.total = String(total);
        that.page.current = res.page;
      });
    },
    sizeChange(size) {
      console.log(size);
      this.page.size = size;
      this.getList(this.page);
      // done()
    },
    currentChange(current) {
      console.log(current);
      this.page.current = current;
      this.getList(this.page);
    },
    handleFilter(param, done) {
      this.page.current = 1;
      this.getList(this.page, param);
      done();
    },
    handleRefreshChange() {
      this.getList(this.page);
    },
    handleOpenBefore(show, type) {
      window.boxType = type;
      // 若是编辑、查看回显名称
      if (["edit", "views"].includes(type)) {
      } else if (type === "add") {
      }
      show();
    },
    handleUpdate(row, index) {
      this.$refs.crud.rowEdit(row, listPage);
    },
    create(row, done, loading) {
      // this.listLoading = true
      const params = {};
      const formdata = [];
      params.tableId = this.id;
      for (const key in this.form) {
        const valParams = {};
        valParams.colName = key;
        valParams.colVal = this.form[key];
        formdata.push(valParams);
      }
      const filter = formdata.filter((item) => item.colName.indexOf("$") == -1);
      params.colList = filter;
      // doPost('/online/oper/save', params)
      //   .then((res) => {
      //     if (res.data.code == 200) {
      //       this.getList(this.page)
      //       done()
      //       this.$message.success('创建成功')
      //       return false
      //     } else {
      //       this.listLoading = false
      //       this.$message.error(res.data.msg)
      //     }
      //     loading()
      //   })
      //   .catch(() => {
      //     loading()
      //   })
      formCreate
        .operSave(params)
        .then((res) => {
          if (res.code == 200) {
            this.getList(this.page);
            done();
            this.$message.success("创建成功");
            return false;
          } else {
            // this.listLoading = false
            this.$message.error(res.msg);
          }
          loading();
        })
        .catch(() => {
          loading();
        });
    },
    update(row, index, done, loading) {
      const params = {};
      const formdata = [];
      params.tableId = this.id;
      for (const key in this.form) {
        const valParams = {};
        valParams.colName = key;
        valParams.colVal = this.form[key];
        formdata.push(valParams);
      }
      const filter = formdata.filter((item) => item.colName.indexOf("$") == -1);
      params.colList = filter;
      // doPut('/online/oper/update', params)
      //   .then((res) => {
      //     if (res.data.code === 200) {
      //       this.getList(this.page)
      //       done()
      //       this.$message.success('更新成功')
      //       return
      //     } else {
      //       this.$message.error(res.data.msg)
      //       return
      //     }
      //     loading()
      //   })
      //   .catch(() => {
      //     loading()
      //   })
      formCreate
        .operUpdate(params)
        .then((res) => {
          if (res.code === 200) {
            this.getList(this.page);
            done();
            this.$message.success("更新成功");
            return;
          } else {
            this.$message.error(res.msg);
            return;
          }
          loading();
        })
        .catch(() => {
          loading();
        });
    },
    deletes(row) {
      const params = {};
      params.tableId = this.id;
      const formdata = [];
      for (const key in row) {
        const valParams = {};
        valParams.colName = key;
        valParams.colVal = row[key];
        formdata.push(valParams);
      }
      params.colList = formdata;
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // doPost('/online/oper/delete', params)
        //   .then((res) => {
        //     if (res.data.code === 200) {
        //       this.getList(this.page)
        //       this.$message.success('删除成功')
        //     } else {
        //       this.$message.error(res.data.msg)
        //     }
        //   })
        //   .catch(() => {
        //     this.$message.error('服务异常')
        //   })
        formCreate
          .operDelete(params)
          .then((res) => {
            if (res.code === 200) {
              this.getList(this.page);
              this.$message.success("删除成功");
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(() => {
            this.$message.error("服务异常");
          });
      });
    },
     topDeletes() {
      let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      const params = {};
      params.tableId = this.id;
      const formdata = [];
      for (const key in selection[0]) {
        const valParams = {};
        valParams.colName = key;
        valParams.colVal = selection[0][key];
        formdata.push(valParams);
      }
      params.colList = formdata;
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        formCreate
          .operDelete(params)
          .then((res) => {
            if (res.code === 200) {
              this.getList(this.page);
              this.$message.success("删除成功");
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(() => {
            this.$message.error("服务异常");
          });
      });
    },
    // 动态表单接口配置
    queryTableData(tableId) {
      const params = {};
      params.tableId = tableId;
      // doGet('/online/tableInfo/pageData/' + params.tableId)
      //   .then((res) => {
      //     if (res.data.code === 200) {
      //       this.option = Object.assign({}, this.option, res.data.data.tableOption)
      //     } else {
      //       this.$message.error(res.data.msg)
      //     }
      //   })
      //   .catch(() => {
      //     this.$message.error('服务异常')
      //   })
      formCreate
        .tableInfoPageData(params.tableId)
        .then((res) => {
          if (res.code === 200) {
            this.option = Object.assign({}, this.option, res.data.tableOption);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message.error("服务异常");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.avue-crud__right {
  /deep/.el-button {
    min-width: 10px;
  }
}
</style>


